<template>
		<Div class="person">
				<Row class="person-nav">
						<Button type="primary" icon="plus" @click="add_person = true">添加店员</Button>
						<Form :model="searchForm">
								<FormItem>
										<Label>店员名称</Label>
										<Input placeholder="店员名称" v-model="searchForm.staff_name"></Input>
								</FormItem>
								<FormItem>
										<Label>所属门店</Label>
										<i-select v-model="searchForm.store_id" clearable placeholder="全部">
												<Option v-for="item in stores" :value="item.id" :key="item.id">{{ item.store_name }}</Option>
										</i-select>
								</FormItem>
						</Form>
						<Div class="seach-btn">
								<Button icon="ios-search" @click="handleSearch">查询</Button>
						</Div>
				</Row>
				<Row>
						<Table :columns="person_title" :data="person_data"></Table>
						<Page :total="page.total" :page-size="page.size" :current.sync="page.current" show-elevator show-total class-name="page" @on-change="handleChangePage"></Page>
				</Row>
				<Modal v-model="add_person" :mask-closable="false" title="添加店员" :transfer="false" class-name="add-person">
						<Form :model="addForm" :rules="rules" ref="addForm" label-position="right" :label-width="100">
								<FormItem label="所属门店" prop="storeid">
										<Select clearable v-model="addForm.storeid">
												<Option v-for="item in stores" :value="item.id" :key="item.id">{{ item.store_name }}</Option>
										</Select>
								</FormItem>
								<FormItem label="登录用户名" prop="username">
										<Input placeholder="请使用手机号作为用户名" :maxlength="11" v-model="addForm.username"></Input>
								</FormItem>
								<FormItem label="登录密码" prop="passwd">
										<Input type="password" placeholder="登录密码不能小于6位" v-model="addForm.passwd"></Input>
								</FormItem>
								<FormItem label="店员姓名" prop="staff_name">
										<Input placeholder="设置店员姓名" v-model="addForm.staff_name"></Input>
								</FormItem>
								<FormItem label="职位" prop="position">
										<Select clearable v-model="addForm.position">
												<Option value="1">店长</Option>
												<Option value="2">店员</Option>
										</Select>
								</FormItem>
								<FormItem label="状态" prop="status">
										<RadioGroup v-model="addForm.status">
												<Radio label="1">正常</Radio>
												<Radio label="0">离职</Radio>
										</RadioGroup>
								</FormItem>
						</Form>
						<Div slot="footer">
								<Button type="primary" @click="handleAddPerson">确认保存</Button>
						</Div>
				</Modal>

				<Modal v-model="edit_person" :mask-closable="false" title="修改店员" :transfer="false" class-name="add-person">
						<Form :model="editPersons" :label-width="100" :rules="editRules" ref="editForm">
								<FormItem label="所属门店" prop="editStoreid">
										<Select filter clearable v-model.number="editPersons.editStoreid">
												<Option v-for="item in stores" :value="item.id" :key="item.id">{{ item.store_name }}</Option>
										</Select>
								</FormItem>
								<FormItem label="登录用户名" prop="editUsername">
										<Input placeholder="建议使用手机号作为用户名" v-model="editPersons.editUsername"></Input>
								</FormItem>
								<FormItem label="登录密码" prop="editPasswd">
										<Input type="password" placeholder="设置登录密码" v-model="editPersons.editPasswd"></Input>
								</FormItem>
								<FormItem label="店员姓名" prop="editStaff_name">
										<Input placeholder="设置店员姓名" v-model="editPersons.editStaff_name"></Input>
								</FormItem>
								<FormItem label="职位" prop="editPosition">
										<Select v-model.number="editPersons.editPosition" clearable>
												<Option :value="1">店长</Option>
												<Option :value="2">店员</Option>
										</Select>
								</FormItem>
								<FormItem label="状态" prop="editStatus">
										<RadioGroup v-model="editPersons.editStatus">
												<Radio label="1">正常</Radio>
												<Radio label="0">离职</Radio>
										</RadioGroup>
								</FormItem>
						</Form>
						<Div slot="footer">
								<Button type="primary" @click="handleEditClikeSub">确认保存</Button>
						</Div>
				</Modal>
		</Div>
</template>

<script>

import { personInit, pagePerson, handlePersonDel, searchPersonInit, handleAddperson, handleGetPersonInit, handleGetPersonSub } from '@/api/store'
import { storesInit } from '@/api/order'

export default {
		name: 'person-list',
		data(){
				const test = (rule, value, callback) => {
					if (value) {
						callback()
					} else {
						callback(new Error('必须选择哟~'))
					}
				}
				return{
						add_person: false,
						edit_person: false,
						wechat_name: '',
						wechat_qrcode: '',
						searchForm: {
							staff_name: '',
							store_id: ''
						},
						page: {
							total: 0,
							size: 1,
							current: 1
						},
						person_title:[
								{
										title: '店员ID',
										align: 'center',
										key: 'id'
								},
								{
										title: '所属门店',
										align: 'center',
										key: 'store_name'
								},
								{
										title: '店员名称',
										align: 'center',
										key: 'staff_name'
								},
								{
										title: '用户名',
										align: 'center',
										key: 'username'
								},
								{
										title: '职位',
										align: 'center',
										key: 'position'
								},
								{
										title: '添加时间',
										align: 'center',
										key: 'created_at'
								},
								{
										title: '状态',
										align: 'center',
										key: 'status'
								},
								{
										title: '操作',
										align: 'center',
										render:(h,params)=>{
												return h('Div',[
														h('Button',{
																props:{
																		type: 'text'
																},
																style:{
																		color: '#ff9000'
																},
																on:{
																		click:()=>{
																				this.edit_person = true;
																				this.editPerson(params.row.id);
																		}
																}
														},'修改'),
														h('Poptip',{
																		props: {
																		confirm: true,
																		title: '您确定要删除这条数据吗?',
																		transfer: true
																},
																on: {
																		'on-ok': () => {
																				this.handleDeletePerson(params.row.id, params.index)
																		}
																}
														},[
																h('Button',{
																		props: {
																				type: 'text'
																		},
																		style: {
																				color: '#c63232'
																		}
																	},'删除')
																])
												])
										}
								}
						],
						person_data:[],
						stores: [],
						addForm: {
							storeid: '',
							username: '',
							passwd: '',
							staff_name: '',
							position: '',
							status: '1'
						},
						rules: {
							storeid: [{ required: true, trigger: 'change', validator: test }],
							username: [{ required: true, trigger: 'blur', message: '不能为空哟~' }],
							passwd: [{ required: true, trigger: 'blur', min: 6, message: '密码设置不对哦~' }],
							staff_name: [{ required: true, trigger: 'blur', message: '不能为空哟~' }],
							position: [{ required: true, trigger: 'change', message: '不能为空哟~' }],
							status: [{ required: true, trigger: 'change', message: '不能为空哟~' }]
						},
						editPersons: {
							id: '',
							editStoreid: '',
							editUsername: '',
							editPasswd: '',
							editStaff_name: '',
							editPosition: '',
							editStatus: '1'
						},
						editRules: {
							editStoreid: [{ required: true, type: 'number', message: '必须选择哟~', trigger: 'change' }],
							editUsername: [{ required: true, trigger: 'blur', message: '不能为空哟~' }],
							editPasswd: [{ required: true, trigger: 'blur', min: 6, message: '密码设置不对哦~' }],
							editStaff_name: [{ required: true, trigger: 'blur', message: '不能为空哟~' }],
							editPosition: [{ required: true, type: 'number', message: '不能为空哟~', trigger: 'change' }]
						}
				}
		},
		methods:{
				init() {
					storesInit().then(response => {
						this.stores = response.data.data.stores
					})
					personInit().then(response => {
						this.wechat_name = response.data.data.mp_config.wechat_name
						this.wechat_qrcode = response.data.data.mp_config.wechat_qrcode
						this.person_data = response.data.data.staffs
						this.page.total = response.data.data.total
						this.page.size = response.data.data.size
					})
				},
				handleAddPerson() {
					this.$refs['addForm'].validate((valid) => {
						if (valid) {
							handleAddperson(this.addForm).then(response => {
								if (response.data.code === 0) {
									this.$Message.success(response.data.message)
									this.$refs['addForm'].resetFields()
									this.add_person = false
									personInit().then(response => {
										this.person_data = response.data.data.staffs
										this.page.total = response.data.data.total
										this.page.size = response.data.data.size
									})
								} else {
									this.$Message.error(response.data.message)
								}
							})
						}
					})
				},
				editPerson(id) {
						this.edit_person = true;
						handleGetPersonInit(id).then(response => {
							this.editPersons.editStoreid = response.data.store_id
							this.editPersons.editUsername = response.data.username
							this.editPersons.editPasswd = response.data.passwd
							this.editPersons.editStaff_name = response.data.staff_name
							this.editPersons.editPosition = response.data.position
							this.editPersons.editStatus = String(response.data.status)
							this.editPersons.id = response.data.id
						})
				},
				handleChangePage(v) {
					pagePerson(v, this.searchForm).then(response => {
						this.person_data = response.data.data.staffs
					})
				},
				handleSearch() {
					searchPersonInit(this.searchForm.store_id, this.searchForm.staff_name).then(response => {
						this.person_data = response.data.data.staffs
						this.page.current = response.data.data.page
						this.page.total = response.data.data.total
					})
				},
				handleEditClikeSub() {
					this.$refs['editForm'].validate((valid) => {
						if (valid) {
							handleGetPersonSub(this.editPersons.id, this.editPersons).then(response => {
								if (response.data.code === 0) {
									this.$Message.success(response.data.message)
									this.$refs['editForm'].resetFields()
									this.edit_person = false
									this.init()
								} else {
									this.$Message.error(response.data.message)
								}
							})
						}
					})
				},
				handleDeletePerson(id, index) {
					handlePersonDel(id).then(res => {
						if (res.data.code === 0) {
							this.$Message.success(res.data.message)
							this.person_data.splice(index, 1)
							if (this.person_data.length === 0) {
								this.init()
							}
						} else {
							this.$Message.error(res.data.message)
						}
					})
				}
		},
		created() {
				this.init()
				this.$nextTick(() => {
					this.$Notice.open({
						duration: 3,
						render: h => {
							return h('div', [
								h('img', {
									attrs: {
										src: this.wechat_qrcode
									},
									style: {
										width: '100px',
										height: '100px',
										display: 'inline-block',
										verticalAlign: 'middle'
									}
								}),
								h('span', {
									style: {
										display: 'inline-block',
										width: '150px',
										fontSize: '14px',
										lineHeight: '1.5',
										paddingLeft: '10px',
										verticalAlign: 'middle'
									},
									domProps: {
										innerHTML: '微信关注“' + this.wechat_name + '”公众号，绑定店员信息，店员即可收到支付提示！'
									}
								})
							])
						}
					})
				})
		}
}
</script>

<style scoped lang="less">
		@import 'store.less';
</style>
